import { BasicColumn, BasicTable, FormSchema, useTable } from "@/components/Table";
import { message, Tag } from "antd";
import { useTranslation } from "react-i18next";
import CreateAndUpdata from "./components/createAndUpdata";
import { useDrawer } from "@/components/Drawer";
import { IconEnum } from "@/enums/appEnum";
import TableAction from "@/components/Table/components/TableAction";
import { deleteDept, getDeptPage } from "@/api/system/dept";
import { handleTree } from "@/utils/tree";
import Toolbar from "@/components/ViewComponents/Toolbar";
const index = () => {
	const { t } = useTranslation();
	const schemas: FormSchema[] = [
		{
			label: t("system.dept.deptName"),
			field: "name",
			component: "Input"
		},
		{
			label: t("system.dept.status"),
			component: "Select",
			field: "status",
			componentProps: {
				options: [
					{
						label: t("system.dept.open"),
						value: 0
					},
					{
						label: t("system.dept.close"),
						value: 1
					}
				]
			}
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("system.dept.deptName"),
			dataIndex: "name"
		},
		{
			title: t("system.dept.leaderUserId"),
			dataIndex: "leaderUserId"
		},
		{
			title: t("system.dept.sort"),
			dataIndex: "sort"
		},
		{
			title: t("system.dept.status"),
			dataIndex: "status",
			render: (status: boolean) => (
				<span>{<Tag color={!status ? "geekblue" : "red"}>{!status ? t("system.dept.open") : t("system.dept.close")}</Tag>}</span>
			)
		},
		{
			title: t("felix_ui.action"),
			dataIndex: "action",
			fixed: "right",
			render: (_: any, record: any) => (
				<TableAction
					actions={[
						{
							icon: IconEnum.EDIT,
							label: t("felix_ui.edit"),
							onClick: handleEdit.bind(null, record)
						},
						{
							icon: IconEnum.DELETE,
							danger: true,
							label: t("felix_ui.delete"),
							popConfirm: {
								title: t("felix_ui.delMessage"),
								placement: "top",
								confirm: handleDelete.bind(null, record.id)
							}
						}
					]}
				></TableAction>
			)
		}
	];

	const [registerTable, { reload }] = useTable({
		api: getDeptPage,
		columns,
		formConfig: {
			labelWidth: 150,
			schemas,
			showActionButtonGroup: true,
			baseColProps: { span: 6 },
			actionColOptions: { span: 12 }
		},
		bordered: true,
		isTreeTable: true,
		useSearchForm: true,
		pagination: false,
		afterFetch: (res: any) => {
			return handleTree(res, "id", "parentId");
		}
	});
	const [registerDrawer, { openDrawer }] = useDrawer();
	const handleEdit = (record: any) => {
		openDrawer(true, {
			reload,
			record,
			isUpdated: true
		});
	};
	//删除角色
	const handleDelete = async (id: number) => {
		// 发起删除
		const res = await await deleteDept(id);
		reload();
		if (!res) return message.error(t("viewComponents.patientInformation.deleteFailed"));
		message.success(t("viewComponents.patientInformation.deleteSuccessfully"));
	};
	const handlerToolbarAction = async (key: string) => {
		switch (key) {
			case "add":
				openDrawer(true, {
					reload,
					isUpdated: false
				});
				break;
		}
	};
	return (
		<div className="page">
			<div className="page-content">
				<BasicTable register={registerTable}></BasicTable>
				<CreateAndUpdata register={registerDrawer}></CreateAndUpdata>
			</div>
			<Toolbar action={handlerToolbarAction} btnList={["add"]} />
		</div>
	);
};
export default index;
